<template>
  <!-- 主体 -->
  <div class="main register">
    <div class="home">
      <img src="../../assets/images/picture.png" alt>
    </div>
    <!-- 国家地区选择 -->
    <div
      style="width:90%;background:#ffffff;margin:-30% auto;box-shadow:0px 5px 122px 0px rgba(255,82,81,0.76);border-radius:10px;z-index: 9999;    position: relative;padding-bottom:40px"
    >
      <div class="reg">
        <div class="content">
          <div class="verify">
            <div class="verify-info verify-code" @click="showDiv">
              <!-- <div style="padding-top: 10px;padding-left:15px;">+{{areaNum}}</div> -->
              <input
                id="input"
                class="codetxt"
                type="text"
                v-model="countrys"
                placeholder="国家地区选择"
                ref="countrys"
                disabled
                value
              >
              <!-- <input class="codetxt" type="text" v-model="countrys" placeholder="+86" ref="countrys" disabled value> -->
            </div>
            <van-popup v-model="showCountry" psosition="botton" :overlay="true">
              <van-picker
                show-toolbar
                title="国家地区选择"
                :columns="columns"
                @cancel="onCancel"
                @confirm="onConfirm"
              ></van-picker>
            </van-popup>
          </div>
          <div class="verify">
            <div class="verify-info">
              <input id="input" type="number" v-model="phone" placeholder="请输入手机号码">
            </div>
            <div class="verify-info verify-code">
              <input
                style=" border-bottom: 1px solid #ebedf0;border: 1px solid rgb(223, 179, 121); border-radius: 10px;width: 10%;"
                type="number"
                v-model="code"
                value
                placeholder="请输入验证码"
                class="msm-code"
              > 
              <button
                class="codetxt"
                type="button"
                :disabled="disabled"
                @click="sendcode"
              >{{btntxt}}</button>
            </div>
            <div class="verify-info">
              <input id="input" type="password" v-model="password" placeholder="请设置登录密码">
              <span class="tips">{{passwordValidate.errorText}}</span>
            </div>
            <!-- <div class="verify-info">
            <input id="input" type="password" v-model="passwordChecked" placeholder="请重复输入密码">
            <span v-if="passwordChecked" class="tips">{{passwordCheckValidate.errorText}}</span>
            </div>-->
            <div class="verify-info">
              <input
                style="background:#ffffff"
                id="input"
                type="text"
                v-model="inviteCode"
                disabled="disabled"
                placeholder="请输入邀请码（非必填）"
              >
            </div>
          </div>
          <div class="submit">
            <button type="submit" class="submit-btn" @click="reg">注册</button>
          </div>
        </div>
      </div>
      <van-radio-group v-model="radio" class="buy6-one">
        <van-radio name="1">
          勾选即表示您已阅读并同意我们的
          <span style="color:#D1A568">《投资服务协议》</span>
        </van-radio>
      </van-radio-group>
    </div>
    <!-- 本活动最终解释权归million wallet所有 -->
    <div class="activity">本活动最终解释权归million wallet所有</div>
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
// import { NavBar, Toast, Tab, Tabs , RadioGroup , Radio } from "vant";
import {
  NavBar,
  Popup,
  Picker,
  Cell,
  CellGroup,
  Toast,
  RadioGroup,
  Radio
} from "vant";
import { register, countryList, getVerificationCode } from "../../axios/api.js";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Toast.name]: Toast,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup
  },
  data() {
    return {
      radio: "0",
      showCountry: false,
      show: false,
      columns: [],
      phone: "",
      code: "",
      password: "",
      passwordChecked: "",
      inviteCode: "",
      btntxt: "获取验证码",
      disabled: false,
      time: 0,
      countrys: "",
      countrysId: "",
      areaNum: "86",
      cList: ""
    };
  },
  created() {
    //国籍
    countryList().then(res => {
      const list = res.data.data;
      console.log(list);
      this.cList = list;
      for (const i in list) {
        const items = list[i];
        const countryChineseName = items.countryChineseName;
        this.columns.push(items.countryChineseName);
      }
    });
  },
  methods: {
    //返回上一页
    // goBack() {
    //   this.$router.go(-1);
    // },
    //跳转到登录页
    // onClickRight() {
    //   this.$router.push("/login");
    // },
    // showDiv() {
    //     this.show = true;
    // },
    showDiv() {
      this.showCountry = true;
    },
    onCancel(picker) {
      this.showCountry = false; //表示点击取消的时候,组件隐藏掉,关闭
      this.showIdType = false;
    },
    onConfirm(value) {
      this.showCountry = false;
      this.showIdType = false;
      this.$refs.countrys.value = value;
      this.myCard = value;
      this.countrys = value;
      console.log(this.$refs.countrys.value, 8888);
      for (var i = 0; i < this.columns.length; i++) {
        if (this.countrys == this.columns[i]) {
          console.log(i);
          this.countrysId = i;
          this.areaNum = 0;
        }
      }
      for (var i = 0; i < this.cList.length; i++) {
        if (this.countrys == this.cList[i].countryChineseName) {
          console.log(i, 8888888);
          this.areaNum = this.cList[i].areaCode;
        }
      }
    },
    onChange(e) {
      console.log(e.getValues()); // 打印出了选中的时间，是个数组
    },
    //发送手机短信验证码
    sendcode() {
      let reg = /^1(3|4|5|7|8)\d{9}$/;
      if (this.phone == "") {
        this.$toast("手机号不能为空");
      } else if (!reg.test(this.phone)) {
        this.$toast("手机号格式不正确");
      } else {
        this.time = 60;
        this.disabled = true;
        //验证码的时间设置
        this.timer();
        //手机号调取后端接口
        getVerificationCode({
          params: {
            phoneNo: this.phone,
            areaNum: this.areaNum
          }
        })
          .then(res => {
            console.log(res.data);
            if (res.status != 200) {
              this.$toast("网络错误");
            } else if (res.status == 200) {
              if (res.data.error == null && res.data.result == true) {
                this.$toast("请注意接收验证码");
              } else if (res.data.error != null && res.data.result == null) {
                this.$toast(res.data.msg);
              }
            }
          })
          .catch(function(err) {
            console.log(err);
          });
      }
    },
    //验证码的倒计时
    timer() {
      if (this.time > 0) {
        this.time--;
        this.btntxt = this.time + "s后获取";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = "获取验证码";
        this.disabled = false;
      }
    },
    //注册账号
    reg() {
      if (that.radio == "0") {
        Toast("未同意投资服务协议！");
        return false;
      }
      let regInfo = new FormData();
      regInfo.append("phoneNo", this.phone);
      regInfo.append("verificationCode", this.code);
      regInfo.append("password", this.password);
      regInfo.append("confirmPassword ", this.passwordChecked);
      regInfo.append("invitationCode ", this.inviteCode);
      register(regInfo).then(res => {
        console.log(res);
        if (res.data.code == 230) {
          this.$toast(res.data.msg);
        }
        if (res.data.code == 200) {
          axios.defaults.headers.Authorization = res.data.data.token;
          this.$store.commit("setToken", res.data.data.token);
          this.$store.commit("getUser", res.data.data.userName);
          this.$store.commit("changeLogin", true); //登录后改变登录状态 isLogin = true
          this.$toast(res.data.msg);
          this.$router.push({ name: "mine" }); //this.$route.query.redirect
        }
      });
    }
  },
  computed: {
    passwordValidate: function() {
      let errorText;
      if (!/^[0-9A-Za-z]{8,16}$/.test(this.password)) {
        errorText = "密码少于8位";
      } else {
        errorText = "";
      }
      if (!this.passwordFlag) {
        errorText = "";
        this.passwordFlag = true;
      }
      return {
        errorText
      };
    },
    passwordCheckValidate: function() {
      var errorText;
      if (!/^[0-9A-Za-z]{8,16}$/.test(this.passwordChecked)) {
        errorText = "密码少于8位";
      } else if (this.password !== this.passwordChecked) {
        errorText = "两次密码不匹配";
      } else {
        errorText = "";
      }
      return {
        errorText
      };
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
.main {
  width: 100%;
  height: 100vh;
  background: url("../../assets/images/background@2x.png");
  background-size: 100%100%;
  padding-bottom: 60px;
}
.home img {
  width: 80%;
  height: 100%;
  margin-top: 10px;
}
/deep/ .van-hairline--top-bottom::after {
  border-width: 0;
  border-bottom-width: 1px;
}
.register {
  .reg {
    display: flex;
    .content {
      width: 90%;
      height: 100%;
      margin: 0 auto;
      .verify {
        width: 100%;
        background: #fff;
        .verify-info {
          box-sizing: border-box;
          line-height: 24px;
          background-color: #fff;
          color: #969799;
          font-size: 14px;
          & > input {
            display: flex;
            padding: 10px 15px;
            border: 0;
          }
          #input {
            border-bottom: 1px solid #ebedf0;
            border: 1px solid rgb(223, 179, 121);
            border-radius: 10px;
            width: 90%;
            margin: 8px auto;
          }
          .tips {
            display: block;
            margin-top: 5px;
            text-align: left;
            color: #f44;
          }
        }
        .verify-code {
          display: inline-flex;
          width: 100%;
          .msm-code {
            flex: 1;
          }
          .codetxt {
            padding: 10px 15px;
            border: 0;
            background: #fff;
            outline: none;
          }
        }
      }
      .submit {
        margin-top: 0.67rem;
        width: 100%;
        background-color: #fff;
        color: #fff;
        font-size: 14px;
        .submit-btn {
          padding: 10px;
          width: 100%;
          height: 1.07rem;
          border: 0;
          background: rgba(255, 207, 125, 1);
          outline: none;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          font-size: 0.35rem;
        }
      }
    }
  }
  .van-cell {
    text-align: left;
  }
  .van-popup {
    position: fixed;
    top: 83.4%;
    width: 100%;
  }
  .activity {
    font-size: 0.3rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(148, 38, 37, 1);
    padding-top: 32%;
  }
  .buy6-one {
    margin-top: 10px;
  }
}
</style>
